import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h, toRaw } from 'vue';
import { Tag } from 'ant-design-vue';
import { Tinymce } from '/@/components/Tinymce/index';
import { getMessageTypeList, getMessageSubTypeList } from '/@/api/system/system';
// import { useMessage } from '/@/hooks/web/useMessage';

export const columns: BasicColumn[] = [
  {
    title: '消息类型',
    dataIndex: 'type',
    width: 150,
    format: (value) => {
      if (value == 'Default') {
        return '系统默认';
      }
      return value;
    },
  },
  {
    title: '子类型',
    dataIndex: 'subTypeName',
    width: 150,
  },
  {
    title: '是否已读',
    dataIndex: 'readFlag',
    width: 150,
    customRender: ({ record }) => {
      const readFlag = toRaw(record.readFlag);
      if (readFlag == 0) {
        return h(
          Tag,
          { color: 'orange' },
          {
            default() {
              return '未读';
            },
          },
        );
      } else {
        return h(
          Tag,
          { color: 'green' },
          {
            default() {
              return '已读';
            },
          },
        );
      }
    },
  },
  {
    title: '标题',
    dataIndex: 'subject',
  },
  {
    title: '发送人',
    dataIndex: 'formUser',
    width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'type',
    label: '消息类型',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: getMessageTypeList,
      labelField: 'label',
      valueField: 'value',
      immediate: false,
    },
  },
  {
    field: 'subType',
    label: '子类型',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: getMessageSubTypeList,
      labelField: 'codeName',
      valueField: 'codeValue',
      immediate: false,
    },
  },
  {
    field: 'readFlag',
    label: '是否已读',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          label: '未读',
          value: '0',
          key: '0',
        },
        {
          label: '已读',
          value: '1',
          key: '1',
        },
      ],
    },
  },
  {
    field: 'subject',
    label: '标题',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'formUser',
    label: '发送人',
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'users',
    label: '接收人',
    component: 'Input',
    slot: 'toUser',
  },
  {
    field: 'roles',
    label: '接收角色',
    slot: 'toRole',
    component: 'Input',
  },
  {
    field: 'subject',
    label: '标题',
    required: true,
    component: 'Input',
  },
  {
    label: '内容',
    field: 'content',
    component: 'Input',
    rules: [{ required: true }],
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
  },
];

export const roleColumns: BasicColumn[] = [
  {
    title: '角色名称',
    dataIndex: 'roleName',
  },
  {
    title: '角色代码',
    dataIndex: 'roleCode',
  },
  {
    title: '所属机构',
    dataIndex: 'branchName',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '备注',
    dataIndex: 'memo',
  },
];

export const formReplaySchema: FormSchema[] = [
  {
    field: 'toUser',
    label: '接收人',
    component: 'Input',
    required: true,
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'subject',
    label: '标题',
    required: true,
    component: 'Input',
  },
  {
    label: '内容',
    field: 'content',
    component: 'Input',
    rules: [{ required: true }],
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
  },
];
